let grid_v = new Vue({
    el:".grid",
    data:{
        arr:[],
    },
    created:function () {
        //判断地址栏中是否包含cid 如果包含代表查询某个分类下的作品
        if (location.search.indexOf("cid") != -1){
            let cid = location.search.split("=")[1];
            axios.get("/product/selectByCid?cid="+cid).then(function (response) {
                grid_v.arr = response.data;
            })
            return;
        }
        //判断地址栏中是否包含wd 如果包含代表搜索作品
        if (location.search.indexOf("wd") != -1){
            //得到搜索的关键字
            let wd = location.search.split("=")[1];
            axios.get("/product/selectByWd?wd="+wd).then(function (response) {
                grid_v.arr = response.data;
            })
            return;
        }
        //请求所有作品
        axios.get("/product/select").then(function (response) {
            grid_v.arr = response.data;
        })
    },
    updated:function () {  //当Vue管理的变量值发生改变时执行此方法
        //图片加载完成时进行瀑布流框架的初始化操作
        $(".grid").imagesLoaded().progress(function () {
            //对瀑布流进行初始化
            $(".grid").masonry({
                itemSelectot:".grid_item", //选择器
                columnWidth:210 //200+10间距
            })
            //给瀑布流中的元素添加鼠标移入移出事件
            $(".grid-item").hover(function () { //鼠标移入触发
                //得到鼠标移入div里面的蓝条div 并让其显示
                $(this).children("div").stop().fadeIn(500);
            },function () { //鼠标移出触发
                $(this).children("div").stop().fadeOut(500);
            });
        })
    }
})